import { defineComponent, ref, watch, shallowReactive } from 'vue'
import { useHomeStore } from '@/store'
import { storeToRefs } from 'pinia'


// 定义主体
export default defineComponent({

  setup() {
    const home = useHomeStore();
    home.greenStationIncome();
    const { station } = storeToRefs(home);
    // 定义 ref
    const chartRef = ref();
    // 配置项
    let options = shallowReactive({color:null,tooltip:null,toolbox:null,calculable:null,xAxis:null,yAxis:null,legend:null,grid: null,series:null})

    watch(
      () => station,
      (val: any) => {
        const { yAxisData, seriesData } = val.value
        options = {
          color: [
            '#37a2da',
          ],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}'
          },
          toolbox: {
            show: true
          },
          calculable: true,
          legend: {
            bottom: 10,
            left: 'center',
            data: ['票款收入']
          },
          grid: {
            left: '3%',
            right: '8%',
            top: '3%',
            bottom: '15%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: yAxisData
          },
          series: [
            {
              name: '票款收入',
              type: 'bar',
              // stack: 'total',
              emphasis: {
                focus: 'series'
              },
              data: seriesData
            },
          ]
        }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "450px"
      const width = "100%"

      return <div>
        <echart ref={chartRef} options={options} height={height} width={width} />
      </div>
    }
  }
})

